<template>
	<view class="body-list">
		<!-- 顶部购物车 -->
		<view class="title-body">
			购物车
		</view>
		<!-- 空空如也 -->
		<view class="shop-body">
			<view class="shop-kongkong">
				<image src="../../static/data-img/空空如也.png" mode=""></image>
				<view class="">
					购物车空空如也，快去挑选好货吧！
				</view>
				<view class="shop-text">
					猜你喜欢
				</view>
			</view>
		</view>
		<view class="cainixihuan">
			<view class="cainixihuan-one">
				<view class="cainixihuan-one-imgs">
					<image
						src="https://img0.baidu.com/it/u=3987139456,1255084305&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"
						mode=""></image>
				</view>
				<text class="texts">买6免3</text>
			</view>
			<view class="cainixihuan-one">
				<view class="cainixihuan-one-imgs">
					<image
						src="https://img0.baidu.com/it/u=3003673920,4095310751&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=750"
						mode=""></image>
				</view>
				<text class="texts">满100-10/150-20</text>
			</view>
		</view>
		<!-- 底部导航栏 -->
		<view class="goods-carts">
			<template>
				<uni-goods-nav :fill="true" :options=options :buttonGroup="buttonGroup" @buttonClick="buttonClick" />
			</template>
		</view>
	</view>
</template>

<script setup lang="ts">
	import {
		reactive
	} from 'vue'

	let options: any = reactive([{
		icon: 'headphones',
		text: '客服'
	}, {
		icon: 'cart',
		text: '购物车',
		info: 2
	}])
	let buttonGroup: any = reactive([{
		text: '立即购买',
		backgroundColor: '#ffa200',
		color: '#fff'
	}])
	let buttonClick = (e: any) => {
		options[1].info++
	}
</script>

<style lang="scss">
	.goods-carts {
		position: fixed;
		bottom: 0;
		width: 100%;
	}

	.body-list {
		background-color: #F2F2F2;
		height: 100vh;

		.title-body {
			text-align: center;
			line-height: 40px;
			background-color: white;
		}

		.shop-body {
			.shop-kongkong {
				width: 100%;
				height: 230px;
				text-align: center;
				color: #999999;

				image {
					width: 50%;
					height: 70%;
				}

				.shop-text {
					margin-top: 20px;
					color: black;
				}
			}
		}

		.cainixihuan {
			margin-top: 10px;
			width: 100%;
			height: 220px;
			display: flex;
			justify-content: space-around;

			.cainixihuan-one {
				margin-top: 10px;
				width: 45%;
				height: 220px;
				background-color: white;
				border-radius: 10px;

				.texts {
					display: inline-block;
					padding-left: 5px;
					font-size: 14px;
				}

				.cainixihuan-one-imgs {
					width: 100%;
					height: 180px;

					image {
						width: 100%;
						height: 100%;
					}
				}
			}
		}
	}
</style>
